@layout("/common/_container.html"){
<link rel="stylesheet" href="${ctxPath}/static/layui/css/layui.css" media="all">
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <div style="width: 100%;float: left">
                    <h5>应用设备统计</h5>
                </div>
            </div>

            <div class="ibox-content">
                <div class="row row-lg">

                    <div class="col-sm-12">
                        <br>
                        <div >
                            <div style="display: flex;flex-direction: row;justify-content: center;align-items: center;">

                                <div style="display: flex;flex-direction: row;float: left;width: 30%;justify-content: center;align-items: center;">
                                    <div style="background-color: #f2f2f2;width: 200px;height: 80px;margin-left: 10px;border-radius: 10px;">
                                        @if(shiro.getUser().roleNames[0] != "超级管理员"){
                                        <h3 style="margin-left: 15px;margin-top: 15px;">已购设备数量</h3>
                                        @}
                                        @if(shiro.getUser().roleNames[0] == "超级管理员"){
                                        <h3 style="margin-left: 15px;margin-top: 15px;">总设备数量</h3>
                                        @}
                                        <h2 id="buyDeviceCount" style="color:#000;margin-left: 15px;margin-top: 5px;">0</h2>
                                    </div>
                                </div>

                                <div style="display: flex;flex-direction: row;float: left;width: 30%;justify-content: center;align-items: center;">
                                    <div style="background-color: #f2f2f2;width: 200px;height: 80px;margin-left: 10px;border-radius: 10px;">
                                        <h3 style="margin-left: 15px;margin-top: 15px;">已使用签名设备数</h3>
                                        <h2 id="useDeviceCount" style="color:#000;margin-left: 15px;margin-top: 5px;">0</h2>
                                    </div>
                                </div>


                                <div style="display: flex;flex-direction: row;float: left;width: 30%;justify-content: center;align-items: center;">
                                    <div style="background-color: #f2f2f2;width: 200px;height: 80px;margin-left: 10px;border-radius: 10px;">
                                        <h3 style="margin-left: 15px;margin-top: 15px;">剩余设备数量</h3>
                                        <h2 id="remainingCount" style="color:#000;margin-left: 15px;margin-top: 5px;">0</h2>
                                    </div>
                                </div>


                                <div style="display: flex;flex-direction: row;float: right;width: 30%;justify-content: center;align-items: center;">
                                    <div style="background-color: #f2f2f2;width: 200px;height: 80px;margin-left: 10px;border-radius: 10px;">
                                        <h3 style="margin-left: 15px;margin-top: 15px;">应用数</h3>
                                        <h2 id="appCount" style="color:#000;margin-left: 15px;margin-top: 5px;">0</h2>
                                    </div>
                                </div>

                            </div>
                            <br/>
                            <div style="width: 100%;display: flex;flex-direction: row;margin-top: 20px;">
                                <div style="width: 100%;float: left"></div>
                                <div style="width: 500px;float: right;margin-right: 130px;
                            display: flex;flex-direction: row;">
                                    @if(shiro.getUser().roleNames[0] == "超级管理员"){
                                    <select id="selectMerchantName" style="margin-right: 20px;">
                                        <option value="0">选择商户</option>
                                    </select>
                                    @}
                                    <input type="text" id="beginTime" style="width: 150px; height: 30px;" placeholder="开始日期">
                                    <h3>-</h3>
                                    <input type="text" id="endTime" style="width: 150px; height: 30px;margin-left: 5px;" placeholder="结束日期">
                                    <button id="btn-change-time" onclick="SignTasks.querySignInfo()"
                                            style="width: 60px;height: 30px;margin-left: 5px;
                                background-color: #2d8ffd;border: none;color: white;">查询</button>
                                </div>
                            </div>

                            <div id="deviceInfo"
                                 style="height: 400px;width: 100%;margin-top: 20px;"></div>

                            @if(shiro.getUser().roleNames[0] == "超级管理员"){
                            <div style="display: flex;flex-direction: row;margin-bottom: 50px;margin-top: 50px;">
                                <div style="display: flex;flex-direction:column;width: 33%;justify-content: center;align-items: center;">
                                    <div id="merchantDeviceBuy"
                                         style="height: 250px;width: 100%;justify-content: center;align-items: center;"></div>
                                    <b><h3 style="margin-top: 20px;color: #0C0C0C">商户已购设备数</h3></b>
                                </div>
                                <div style="display: flex;flex-direction:column;width: 33%;justify-content: center;align-items: center;">
                                    <div id="merchantDeviceUsed"
                                         style="height: 250px;width: 100%;"></div>
                                    <b><h3 style="margin-top: 20px;color: #0C0C0C">商户已签设备数</h3></b>
                                </div>
                                <div style="display: flex;flex-direction:column;width: 33%;justify-content: center;align-items: center;">
                                    <div id="merchantDeviceRemaining"
                                         style="height: 250px;width: 100%;"></div>
                                    <b><h3 style="margin-top: 20px;color: #0C0C0C">商户剩余设备数</h3></b>
                                </div>
                            </div>
                            @}
                        </div>
                        <br>
                        <div style="display: flex;flex-direction: row;margin-top: 30px;">
                            <div style="float:left;width: 100%;display: flex;flex-direction: row;">
                                <h3>应用设备详情</h3>
                                @if(shiro.getUser().roleNames[0] == "超级管理员"){
                                <select id="merchantName" name="merchantName" style="margin-left: 20px;">
                                    <option value="0">选择商户</option>
                                </select>
                                @}

                                <select id="status" style="margin-left: 20px;">
                                    <option value="0">选择签包状态</option>
                                    <option value="2">签包成功</option>
                                    <option value="-1">待签</option>
                                    <option value="1">签包中</option>
                                    <option value="3">添加设备失败</option>
                                    <option value="4">签包失败</option>
                                </select>
                                <input type="text" id="signBeginTime" style="height: 30px;margin-left: 20px;" placeholder="开始日期">
                                <h3>-</h3>
                                <input type="text" id="signEndTime" style="height: 30px;margin-left: 5px;" placeholder="结束日期">
                                <button onclick="SignTasks.filterDetail()"
                                        style="width: 60px;height: 30px;margin-left: 5px;
                                background-color: #2d8ffd;border: none;color: white;">查询</button>
                            </div>
                            <div style="float: right;">
                                <select id="sortCondition" onchange="SignTasks.changeSort()" style="margin-left: 20px;">
                                    <option value="1">按应用排序</option>
                                    <option value="2">按设备排序</option>
                                    @if(shiro.getUser().roleNames[0] == "超级管理员"){
                                    <option value="3">按商户排序</option>
                                    @}
                                </select>
                            </div>

                        </div>
                        <input type="hidden" id="isAdmin" value="${shiro.getUser().roleNames[0]}">
                        <div style="width: 100%;height: 600px;">

                            <table class="layui-table-body"
                                   id="table" layout-filter="info2" style="margin-top: 20px;"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="${ctxPath}/static/dist/echarts.min.js" charset="utf-8"></script>
<script type="text/javascript" src="${ctxPath}/static/dist/echarts.common.min.js" charset="utf-8"></script>
<script src="${ctxPath}/static/layui/layui.js"></script>
<script src="${ctxPath}/static/modular/apple_sign_task_manage/signTasks/signTasks.js"></script>
<script>
    laydate.render({
        elem: '#beginTime'
    });
    laydate.render({
        elem: '#endTime'
    });

    laydate.render({
        elem: '#signBeginTime'
    });
    laydate.render({
        elem: '#signEndTime'
    });
</script>
@}
